<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D轮播</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li{
            list-style: none;
        }

        .container {
            width: 210px;
            height: 140px;
            position: relative;
            perspective: 1000px;
            margin: 100px auto;
        }

        ul {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
        }

        ul li {
            margin: 0;
            display: block;
            position: absolute;
            width: 200px;
            height: 150px;
            left: 3px;
            top: 10px;
            border: 2px solid black;
        }

        ul li:nth-child(1) {
            transform: rotateY( 0deg) translateZ( 288px);
            background: url(img/布鲁克.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(2) {
            transform: rotateY( 40deg) translateZ( 288px);
            background: url(img/弗兰奇.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(3) {
            transform: rotateY( 80deg) translateZ( 288px);
            background: url(img/妮可罗宾.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(4) {
            transform: rotateY( 120deg) translateZ( 288px);
            background: url(img/托尼托尼·乔巴.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(5) {
            transform: rotateY( 160deg) translateZ( 288px);
            background: url(img/娜美.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(6) {
            transform: rotateY( 200deg) translateZ( 288px);
            background: url(img/乌索普.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(7) {
            transform: rotateY( 240deg) translateZ( 288px);
            background: url(img/山治.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(8) {
            transform: rotateY( 280deg) translateZ( 288px);
            background: url(img/罗罗诺亚·索隆.jpg);
            background-size:200px 150px;
        }

        ul li:nth-child(9) {
            transform: rotateY( 320deg) translateZ( 288px);
            background: url(img/路飞大大.jpg);
            background-size:200px 150px;
        }

        ul{
            animation:run 10s linear infinite;
        }
        @keyframes run{
            from{
                transform:rotateY(0deg);
            }
            to{
                transform:rotateY(360deg);
            }
        }

        ul:hover{
            animation-play-state:paused;
        }
    </style>
</head>
<body>

<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>